<template>
    <div id="analyzeProfitAndLoss" style="width:100%;height:400px;"></div>

</template>

<script>
import echarts from 'echarts';

export default {
    data() {
        return {

        }
    },
    mounted() {
        this.$nextTick(() => {
            let tradeChart = echarts.init(document.getElementById('analyzeProfitAndLoss'));
            let option = {

                title: {
                    text: '盈亏与分析',
                    left: 'center'
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    name: '利润',
                    type: 'value'
                },

                dataZoom: [  // 滑动缩放
                    {
                        // startValue: '11:10:11'
                    },
                    {
                        type: "inside", // 拖动x轴缩放
                    },
                ],
                calculable: true,
                series: [
                    {
                        data: [120, 200, 150, 80, 70, -20, -80],
                        type: 'bar',
                        color: 'green',

                    }
                ]
            };
            tradeChart.setOption(option);

            window.addEventListener('resize', function () {
                tradeChart.resize();
            })
        })

    },
}
</script>
<style lang="scss" scoped></style>